<template>
  <div class="container" style="width:100%;height:100%;background:#f3f3f3;">
    <van-nav-bar :title="title" fixed class="titleStyle" left-arrow @click-left="onClickLeft" />
    <div class="searchDiv">
      <form action="/">
        <van-search v-model="search.equipKeyword" show-action placeholder="请输入设备名称编码进行搜索" @search="onSearch" @cancel="onCancel" />
        <van-checkbox-group class="groupCheck" @change="statusChange" v-model="search.status" direction="horizontal">
          <van-checkbox :name="5">未接收</van-checkbox>
          <van-checkbox :name="6">已接收</van-checkbox>
          <van-checkbox :name="7">保养中</van-checkbox>
        
        </van-checkbox-group>
      </form>
      <van-button class="saveBtns" type="primary" native-type="submit" @click="onSearch(search.equipKeyword)">查询</van-button>
    </div>
    <!-- 设备列表-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="已全部加载完成" class="van-clearfix" :immediate-check="false" @load="onLoad">
        <div class="contentBox" style="padding: 160px 10px 180px 10px;">
          <div v-for=" item in list" :key="item.purchaseId" class="listDiv">
            <van-row style="width:100%;height:100%;">
              <div class="checkList">
                <h1>
                  <span>{{item.maintainNo}}</span>
                  <b>保养任务单</b>
                </h1>
                <ul>
                  <li>
                    <b>设备：</b>
                    <span>{{ item.equipName }}{{ item.equipCode !== '' ? '【' + item.equipCode + '】': '' }}</span>
                  </li>
                  <li>
                    <b>状态：</b>
                    <span>{{ item.statusStr }}</span>
                  </li>
                  <li>
                    <b>班组：</b>
                    <span>{{ item.groupName }}</span>
                  </li>
                  <li>
                    <b>责任人：</b>
                    <span>{{ item.dutyUserName }}</span>
                  </li>
                  <li>
                    <b>计划保养日期：</b>
                    <span>{{ item.plannedMaintenanceDate }}</span>
                  </li>
                  <li>
                    <b>派工时间：</b>
                    <span>{{ item.dispatchTime }}</span>
                  </li>
                  <li>
                    <b>保养类型：</b>
                    <span>{{ item.maintainClassifyStr }}</span>
                  </li>
                </ul>
                <div class="checkListBtn">
                  <van-button type="info" v-show="[5].includes(item.status)" @click="showReceive(item,1)">接收</van-button>
                  <van-button type="info" v-show="[6].includes(item.status)" @click="showReceive(item,2)">开始</van-button>
                  <van-button type="info" v-show="[7].includes(item.status)" @click="showWorkReport(item)">报工</van-button>
                  <van-button type="info" v-show="item.status === 6 || item.status === 7" @click="applyAccessory(item)">申请配件</van-button>
                </div>
              </div>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div v-show="list.length === 0 && loading === false" class="noDataAvailable noDataAvailable3" />
  </div>
</template>
<script>
export default {
  name: 'FirstInspection',
  data() {
    return {
      show: false,
      title: localStorage.getItem('name'),
      code: localStorage.getItem('code'),
      search: {
        status: [5, 6, 7],
        equipKeyword: '',
        current: 1,
        size: 5
      },
      list: [],
      pages: 0,
      total: 0,
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  created() {
    this.search.proBatchNo = this.$route.query.code
  },
  mounted() {
    this.getListInfo()
  },
  methods: {
    onSearch(val) {
      this.search.equipKeyword = val
      this.getListInfo(1)
    },
    onCancel() {
      this.search.equipKeyword = ''
      this.finished = false
      this.getListInfo(1)
    },
    statusChange($event) {
      this.search.status = $event
      this.getListInfo(1)
    },
    /* 获取页面数据 */
    async getListInfo(page) {
      if (page) this.search.current = page
      if (+page === 1) this.list = []
      this.loading = true
      const res = await this.$axios.post(
        '/dobo-equip/maintain/task/list',
        this.search
      )
      if (res.data.code === 200) {
        this.show = false
        const list = []
        res.data.data.list.filter((item) => {
          list.push(item)
        })
        this.list = this.list.concat(list) // 去重 合并
        const hash = {}
        // 数组去重
        this.list = this.list.reduce((preVal, curVal) => {
          /* eslint-disable-next-line */
          hash[curVal.id] ? '' : (hash[curVal.id] = true && preVal.push(curVal))
          return preVal
        }, [])
        this.total = res.data.data.total
        this.loading = false
        if (+this.list.length === +this.total) {
          this.finished = true
        }
      }
    },
    //   触底加载
    onLoad() {
      setTimeout(() => {
        if (this.list.length < this.search.current) {
          this.finished = true
          return
        }

        if (this.list.length === this.total) {
          this.finished = true
          return
        }
        let num
        num = this.search.current
        num++
        this.getListInfo(num)
      }, 1000)
    },
    //  下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.list = []
        this.total = 0
        this.finished = false
        this.getListInfo(1)
        this.isLoading = false
      }, 500)
    },
    /** 接收\开始*/
    async showReceive(row, state) {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      })
      let url = ''
      if (state === 1) {
        url = `/dobo-equip/maintain/task/receive/${row.id}`
      } else {
        url = `/dobo-equip/maintain/task/start/${row.id}`
      }
      const res = await this.$axios.post(url)
      if (res && res.data.code === 200) {
        setTimeout(() => {
          toast.clear()
          if (state === 1) {
            this.$toast.success('接收成功！')
          } else {
            this.$toast.success('开始成功！')
          }
          this.getListInfo(1)
        }, 500)
      }
    },
    /* 申请配件 */
    applyAccessory(row) {
      row.type = 2
      this.$router.push('/applyAccessory')
      this.$store.commit('getDate', row)
    },
    /* 报工 */
    showWorkReport(row) {
      this.$router.push('/workReportBy')
      this.$store.commit('getDate', row)
    },
    // 返回
    onClickLeft() {
      this.$router.push('/Task')
    }
  }
}
</script>
<style lang='scss' scoped>
.searchDiv {
  width: 100%;
  height: 90px;
  position: fixed;
  top: 60px;
  z-index: 99;
  background: #fff;
  .van-search {
    width: calc(100% - 100px);
  }
  .groupCheck {
    margin: 3px 0 0 10px;
  }
  .saveBtns {
    position: fixed;
    top: 68px;
    right: 10px;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(to top right, #1cacff, #022566);
    border: 1px solid #022566;
    .van-button__content {
      display: block;
      .van-button__text {
        text-align: center;
        width: 100%;
        font-size: 20px;
      }
    }
  }
}
</style>
<style lang='scss'>
</style>
